<template>
  <div class="index-wrap">
    <!-- 搜索 -->
    <van-search
      v-model="searchVal"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 轮播 -->
    <div>
      <van-swipe class="swipe-box" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品分类 -->
    <div>
      <van-tabs v-model="active">
        <van-tab title="商品 1">商品 1</van-tab>
        <van-tab title="商品 2">商品 2</van-tab>
        <van-tab title="商品 3">商品 3</van-tab>
        <van-tab title="商品 4">商品 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchVal: '',
      active: 0,
    }
  },
  created() {},
  methods: {
    onSearch() {},
  },
}
</script>

<style lang="less" scoped>
.index-wrap {
  font-size: 28px;
}

.swipe-box .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 400px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
